<template>
  <div class="error404">
     <div class="error-content-con">
       <div class="pic-404">
         <img class="pic-404__parent" src="../../assets/img/404.png" alt="">
       </div>
       <div class="bullshit">
         <h1 class="bullshit__oops">OOPS!</h1>
         <h2 class="bullshit__headline">网管说这个页面你不能进......</h2>
         <div  class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页</div>
         <div  class="bullshit__return">
           <el-button @click="backHome">返回首页</el-button>
           <el-button @click="backPrev">返回上一页</el-button>
         </div>
       </div>

     </div>
  </div>
</template>
<script>
  export default {
    // name:'error_content',
    // props:{
    //    src:String,
    //   code:String,
    //   desc:String
    // },
    data(){
      return{}
    },
    methods:{
      backHome(){
        this.$router.push({
          name:'home'
        })
      },
      backPrev(){
        this.$router.go(-1)
      }
    }
  }
</script>
<style lang="less" scoped>
    .error404{
      transform: translate(-50%,-50%);
      position: absolute;
      top: 40%;
      left: 60%;
    }
    .error-content-con{
      position: relative;
      width: 1200px;
      padding: 0 50px;
      overflow: hidden;
      .pic-404{
         position: relative;
        float: left;
        width: 600px;
        overflow: hidden;
        &__parent{
          width: 100%;
        }
      }
    }
  .bullshit{
    position: relative;
    float: left;
    width:300px;
    padding: 30px 0;
    overflow: hidden;
    &__oops{
      color: #1482f0;
      opacity: 0;
      animation-name: slideUp;
      animation-duration: 1s;
      animation-fill-mode: forwards;
    }
    &__headline{
      color: #222222;
      opacity: 0;
      animation-name: slideUp;
      animation-duration: 1s;
      animation-delay: 0.25s;
      animation-fill-mode: forwards;
    }
    &__info{
      color: gray;
      opacity: 0;
      margin-bottom: 30px;
      animation-name: slideUp;
      animation-duration: 1s;
      animation-delay: 0.5s;
      animation-fill-mode: forwards;
    }
    &__return{
      opacity: 0;
      animation-name: slideUp;
      animation-duration: 1s;
      animation-delay: 0.75s;
      animation-fill-mode: forwards;
    }
    @keyframes slideUp{
      0%{
        transform: translateY(60px);
        opacity: 0;
      }
      100%{
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
</style>
